import { $ } from './library/jquery-module.js';
import './library/jquery-extend-tabs.js';
import './library/jquery-extend-trolley-slider.js';
import cookie from './library/cookie.js';

$(function() {
    // 放大镜搜索框
    $('.searchinput>input').on('focus', function() {
        $('.search-icon').css('visibility', 'hidden');

    });
    $('.searchinput>input').on('blur', function() {
        $('.search-icon').css('visibility', 'visible');

    });

    // 购物车选项卡 全部商品  降价商品  库存紧张
    $('#trolley-now').tabs({
        ev: 'click',
        active: 'active',
        show: 'show'
    });

    // 下边框
    $('#trolley-list>li').on('mouseover', function() {
        $(this).addClass('trolley-under').siblings().removeClass('trolley-under');
    });

    // 获得cookie
    let trolley = cookie.get('trolley');
    if (trolley) {
        trolley = JSON.parse(trolley);

        let idList = trolley.map(elm => elm.id).join();
        $.ajax({
            type: "get",
            dataType: "json",
            url: "../../interface/shoptrolley.php",
            data: { idList },
            success: function(res) {
                let temp = '';
                trolley.forEach(function(val) {
                    // msg ：获得当前cookie 与 请求到的数据 匹配id的商品信息
                    let msg = res.filter(function(elm) {
                        return val.id == elm.id;
                    });
                    // console.log(val.id);
                    // console.log(val.edition)
                    // 获得图片
                    let pic = JSON.parse(msg[0].picture);
                    // 获得商品标题
                    let title = JSON.parse(msg[0].title);
                    // 获得商品型号
                    let goodstype = JSON.parse(msg[0].type);
                    temp += `<li class="clearfloat">
                    <span class="select-btn">
                    <input type="checkbox" class="checkbox-btn store-check-all-item single-pro-choose" data-id=${val.id} data-edition=${val.edition}>
                    </span>
                    <span class="pro-picture">
                        <a href="#">
                            <img src="../${pic[0].src}" alt="">
                            <span>
                                <img src="../${pic[0].src}" alt="">
                                <i></i>    
                            </span>

                        </a>
                    </span>
                    <span class="goods-define">
                        <p class="define-title">
                            <a href="#">${title[0].name}</a>
                        </p>
                        <p class="user-payway">
                            <img src="../img/pay-by-card.png" alt="">
                            <a href="#"><img src="../img/seven-day.png" alt=""></a>
                        </p>
                    </span>
                    <span class="goods-standard">
                                <div>
                                    组合套餐：${val.edition}
                                    <span class="modify-btn">
                                        修改
                                        <div class="modify-msg">
                                            <div class="modify-left">
                                                <span class="m-title">
                                                    组合套餐
                                                </span>
                                                <span class="m-standard">
                                                    <div class="ch-standard">${goodstype[0]}
                                                        <span></span>
                                                        <i></i>
                                                    </div>
                                                    <div class="ch-standard">${goodstype[1]}
                                                        <span></span>
                                                        <i></i>
                                                    </div>
                                                    <div class="m-btn" id="btn-${val.id}">
                                                        <span>确定</span>
                                                        <span>取消</span>
                                                    </div>
                                                </span>
                                            </div>
                                            <div class="modify-right">
                                                <img src="../${pic[0].src}" alt="">
                                            </div>
                                            <i></i>
                                        </div>
                                    </span>
                                    <span class="modify-pen">
                                        <i class="iconfont">&#xe636;</i>
                                    </span>
                                </div>
                </span>
<span class="unit-price">
                     <p class="previous-price">
                        ￥778.00
                    </p>
                    <p class="now-price">
                        ￥${parseFloat(msg[0].price).toFixed(2)}
                    </p>
                </span>
<span class="goods-counts">
                        <span class="reduce-btn" data-id=${val.id} data-edition=${val.edition}>-</span>
<input type="text" class="count-input" value="${parseInt(val.num)}" data-id=${val.id} data-edition=${val.edition}>
<span class="add-btn" data-id=${val.id} data-edition=${val.edition}>+</span>
</span>
<span class="sin-sumprice">
                        <p class="sin-sum-price">￥${msg[0].price * parseInt(val.num)}</p>
                        <p>进口税：商品已包税</p>
                </span>
<span class="clear-operation">
                    <p class="remove-to-save">移入收藏夹</p>
                    <p class="delete-this" data-id=${val.id} data-edition=${val.edition}>删除</p>
                    <p class="like-text">
                            相似宝贝
                            <i class="iconfont">&#xe7c3;</i>
                           
                    </p>
                     <div>
                        <div id="like-goods">
                            <div>
                                <span>
                                    <ul>
                                        <li>
                                            <a href="#" class="product-image">
                                                <img src="../img/goods-img-1.jpg" alt="">
                                            </a>
                                            <p class="product-price">
                                                <a>￥350</a>
                                                <a>17984人付款</a>
                                            </p>
                                            <p class="product-describe">
                                                <a href="#">IPSA茵芙莎流金水抗痘控油爽肤水水油平衡深度补水调理痘痘肌</a>
                                            </p>
                                            <a href="#" class="addto-trolley">
                                                加入购物车
                                            </a>
                                        </li>
                                        <li>
                                            <a href="#" class="product-image">
                                                <img src="../img/goods-img-2.jpg" alt="">
                                            </a>
                                            <p class="product-price">
                                                <a>￥350</a>
                                                <a>17984人付款</a>
                                            </p>
                                            <p class="product-describe">
                                                <a href="#">IPSA茵芙莎流金水抗痘控油爽肤水水油平衡深度补水调理痘痘肌</a>
                                            </p>
                                            <a href="#" class="addto-trolley">
                                                加入购物车
                                            </a>
                                        </li>
                                        <li>
                                            <a href="#" class="product-image">
                                                <img src="../img/goods-img-3.jpg" alt="">
                                            </a>
                                            <p class="product-price">
                                                <a>￥350</a>
                                                <a>17984人付款</a>
                                            </p>
                                            <p class="product-describe">
                                                <a href="#">IPSA茵芙莎流金水抗痘控油爽肤水水油平衡深度补水调理痘痘肌</a>
                                            </p>
                                            <a href="#" class="addto-trolley">
                                                加入购物车
                                            </a>
                                        </li>
                                        <li>
                                            <a href="#" class="product-image">
                                                <img src="../img/goods-img-4.jpg" alt="">
                                            </a>
                                            <p class="product-price">
                                                <a>￥350</a>
                                                <a>17984人付款</a>
                                            </p>
                                            <p class="product-describe">
                                                <a href="#">IPSA茵芙莎流金水抗痘控油爽肤水水油平衡深度补水调理痘痘肌</a>
                                            </p>
                                            <a href="#" class="addto-trolley">
                                                加入购物车
                                            </a>
                                        </li>
                                    </ul>
                                </span>
<span>
                                    <ul>
                                        <li>
                                            <a href="#" class="product-image">
                                                <img src="../img/goods-img-5.jpg" alt="">
                                            </a>
                                            <p class="product-price">
                                                <a>￥350</a>
                                                <a>17984人付款</a>
                                            </p>
                                            <p class="product-describe">
                                                <a href="#">IPSA茵芙莎流金水抗痘控油爽肤水水油平衡深度补水调理痘痘肌</a>
                                            </p>
                                            <a href="#" class="addto-trolley">
                                                加入购物车
                                            </a>
                                        </li>
                                        <li>
                                            <a href="#" class="product-image">
                                                <img src="../img/goods-img-6.jpg" alt="">
                                            </a>
                                            <p class="product-price">
                                                <a>￥350</a>
                                                <a>17984人付款</a>
                                            </p>
                                            <p class="product-describe">
                                                <a href="#">IPSA茵芙莎流金水抗痘控油爽肤水水油平衡深度补水调理痘痘肌</a>
                                            </p>
                                            <a href="#" class="addto-trolley">
                                                加入购物车
                                            </a>
                                        </li>
                                        <li>
                                            <a href="#" class="product-image">
                                                <img src="../img/goods-img-7.jpg" alt="">
                                            </a>
                                            <p class="product-price">
                                                <a>￥350</a>
                                                <a>17984人付款</a>
                                            </p>
                                            <p class="product-describe">
                                                <a href="#">IPSA茵芙莎流金水抗痘控油爽肤水水油平衡深度补水调理痘痘肌</a>
                                            </p>
                                            <a href="#" class="addto-trolley">
                                                加入购物车
                                            </a>
                                        </li>
                                        <li>
                                            <a href="#" class="product-image">
                                                <img src="../img/goods-img-8.jpg" alt="">
                                            </a>
                                            <p class="product-price">
                                                <a>￥350</a>
                                                <a>17984人付款</a>
                                            </p>
                                            <p class="product-describe">
                                                <a href="#">IPSA茵芙莎流金水抗痘控油爽肤水水油平衡深度补水调理痘痘肌</a>
                                            </p>
                                            <a href="#" class="addto-trolley">
                                                加入购物车
                                            </a>
                                        </li>
                                    </ul>
                                </span>
<span>
                                    <ul>
                                        <li>
                                            <a href="#" class="product-image">
                                                <img src="../img/goods-img-1.jpg" alt="">
                                            </a>
                                            <p class="product-price">
                                                <a>￥350</a>
                                                <a>17984人付款</a>
                                            </p>
                                            <p class="product-describe">
                                                <a href="#">IPSA茵芙莎流金水抗痘控油爽肤水水油平衡深度补水调理痘痘肌</a>
                                            </p>
                                            <a href="#" class="addto-trolley">
                                                加入购物车
                                            </a>
                                        </li>
                                        <li>
                                            <a href="#" class="product-image">
                                                <img src="../img/goods-img-2.jpg" alt="">
                                            </a>
                                            <p class="product-price">
                                                <a>￥350</a>
                                                <a>17984人付款</a>
                                            </p>
                                            <p class="product-describe">
                                                <a href="#">IPSA茵芙莎流金水抗痘控油爽肤水水油平衡深度补水调理痘痘肌</a>
                                            </p>
                                            <a href="#" class="addto-trolley">
                                                加入购物车
                                            </a>
                                        </li>
                                        <li>
                                            <a href="#" class="product-image">
                                                <img src="../img/goods-img-3.jpg" alt="">
                                            </a>
                                            <p class="product-price">
                                                <a>￥350</a>
                                                <a>17984人付款</a>
                                            </p>
                                            <p class="product-describe">
                                                <a href="#">IPSA茵芙莎流金水抗痘控油爽肤水水油平衡深度补水调理痘痘肌</a>
                                            </p>
                                            <a href="#" class="addto-trolley">
                                                加入购物车
                                            </a>
                                        </li>
                                        <li>
                                            <a href="#" class="product-image">
                                                <img src="../img/goods-img-4.jpg" alt="">
                                            </a>
                                            <p class="product-price">
                                                <a>￥350</a>
                                                <a>17984人付款</a>
                                            </p>
                                            <p class="product-describe">
                                                <a href="#">IPSA茵芙莎流金水抗痘控油爽肤水水油平衡深度补水调理痘痘肌</a>
                                            </p>
                                            <a href="#" class="addto-trolley">
                                                加入购物车
                                            </a>
                                        </li>
                                    </ul>
                                </span>
<span>
                                    <ul>
                                        <li>
                                            <a href="#" class="product-image">
                                                <img src="../img/goods-img-5.jpg" alt="">
                                            </a>
                                            <p class="product-price">
                                                <a>￥350</a>
                                                <a>17984人付款</a>
                                            </p>
                                            <p class="product-describe">
                                                <a href="#">IPSA茵芙莎流金水抗痘控油爽肤水水油平衡深度补水调理痘痘肌</a>
                                            </p>
                                            <a href="#" class="addto-trolley">
                                                加入购物车
                                            </a>
                                        </li>
                                        <li>
                                            <a href="#" class="product-image">
                                                <img src="../img/goods-img-6.jpg" alt="">
                                            </a>
                                            <p class="product-price">
                                                <a>￥350</a>
                                                <a>17984人付款</a>
                                            </p>
                                            <p class="product-describe">
                                                <a href="#">IPSA茵芙莎流金水抗痘控油爽肤水水油平衡深度补水调理痘痘肌</a>
                                            </p>
                                            <a href="#" class="addto-trolley">
                                                加入购物车
                                            </a>
                                        </li>
                                        <li>
                                            <a href="#" class="product-image">
                                                <img src="../img/goods-img-7.jpg" alt="">
                                            </a>
                                            <p class="product-price">
                                                <a>￥350</a>
                                                <a>17984人付款</a>
                                            </p>
                                            <p class="product-describe">
                                                <a href="#">IPSA茵芙莎流金水抗痘控油爽肤水水油平衡深度补水调理痘痘肌</a>
                                            </p>
                                            <a href="#" class="addto-trolley">
                                                加入购物车
                                            </a>
                                        </li>
                                        <li>
                                            <a href="#" class="product-image">
                                                <img src="../img/goods-img-8.jpg" alt="">
                                            </a>
                                            <p class="product-price">
                                                <a>￥350</a>
                                                <a>17984人付款</a>
                                            </p>
                                            <p class="product-describe">
                                                <a href="#">IPSA茵芙莎流金水抗痘控油爽肤水水油平衡深度补水调理痘痘肌</a>
                                            </p>
                                            <a href="#" class="addto-trolley">
                                                加入购物车
                                            </a>
                                        </li>
                                    </ul>
                                </span>
<span>
                                    <ul>
                                        <li>
                                            <a href="#" class="product-image">
                                                <img src="../img/goods-img-1.jpg" alt="">
                                            </a>
                                            <p class="product-price">
                                                <a>￥350</a>
                                                <a>17984人付款</a>
                                            </p>
                                            <p class="product-describe">
                                                <a href="#">IPSA茵芙莎流金水抗痘控油爽肤水水油平衡深度补水调理痘痘肌</a>
                                            </p>
                                            <a href="#" class="addto-trolley">
                                                加入购物车
                                            </a>
                                        </li>
                                        <li>
                                            <a href="#" class="product-image">
                                                <img src="../img/goods-img-2.jpg" alt="">
                                            </a>
                                            <p class="product-price">
                                                <a>￥350</a>
                                                <a>17984人付款</a>
                                            </p>
                                            <p class="product-describe">
                                                <a href="#">IPSA茵芙莎流金水抗痘控油爽肤水水油平衡深度补水调理痘痘肌</a>
                                            </p>
                                            <a href="#" class="addto-trolley">
                                                加入购物车
                                            </a>
                                        </li>
                                        <li>
                                            <a href="#" class="product-image">
                                                <img src="../img/goods-img-3.jpg" alt="">
                                            </a>
                                            <p class="product-price">
                                                <a>￥350</a>
                                                <a>17984人付款</a>
                                            </p>
                                            <p class="product-describe">
                                                <a href="#">IPSA茵芙莎流金水抗痘控油爽肤水水油平衡深度补水调理痘痘肌</a>
                                            </p>
                                            <a href="#" class="addto-trolley">
                                                加入购物车
                                            </a>
                                        </li>
                                        <li>
                                            <a href="#" class="product-image">
                                                <img src="../img/goods-img-4.jpg" alt="">
                                            </a>
                                            <p class="product-price">
                                                <a>￥350</a>
                                                <a>17984人付款</a>
                                            </p>
                                            <p class="product-describe">
                                                <a href="#">IPSA茵芙莎流金水抗痘控油爽肤水水油平衡深度补水调理痘痘肌</a>
                                            </p>
                                            <a href="#" class="addto-trolley">
                                                加入购物车
                                            </a>
                                        </li>
                                    </ul>
                                </span>
<span>
                                    <ul>
                                        <li>
                                            <a href="#" class="product-image">
                                                <img src="../img/goods-img-5.jpg" alt="">
                                            </a>
                                            <p class="product-price">
                                                <a>￥350</a>
                                                <a>17984人付款</a>
                                            </p>
                                            <p class="product-describe">
                                                <a href="#">IPSA茵芙莎流金水抗痘控油爽肤水水油平衡深度补水调理痘痘肌</a>
                                            </p>
                                            <a href="#" class="addto-trolley">
                                                加入购物车
                                            </a>
                                        </li>
                                        <li>
                                            <a href="#" class="product-image">
                                                <img src="../img/goods-img-6.jpg" alt="">
                                            </a>
                                            <p class="product-price">
                                                <a>￥350</a>
                                                <a>17984人付款</a>
                                            </p>
                                            <p class="product-describe">
                                                <a href="#">IPSA茵芙莎流金水抗痘控油爽肤水水油平衡深度补水调理痘痘肌</a>
                                            </p>
                                            <a href="#" class="addto-trolley">
                                                加入购物车
                                            </a>
                                        </li>
                                        <li>
                                            <a href="#" class="product-image">
                                                <img src="../img/goods-img-7.jpg" alt="">
                                            </a>
                                            <p class="product-price">
                                                <a>￥350</a>
                                                <a>17984人付款</a>
                                            </p>
                                            <p class="product-describe">
                                                <a href="#">IPSA茵芙莎流金水抗痘控油爽肤水水油平衡深度补水调理痘痘肌</a>
                                            </p>
                                            <a href="#" class="addto-trolley">
                                                加入购物车
                                            </a>
                                        </li>
                                        <li>
                                            <a href="#" class="product-image">
                                                <img src="../img/goods-img-8.jpg" alt="">
                                            </a>
                                            <p class="product-price">
                                                <a>￥350</a>
                                                <a>17984人付款</a>
                                            </p>
                                            <p class="product-describe">
                                                <a href="#">IPSA茵芙莎流金水抗痘控油爽肤水水油平衡深度补水调理痘痘肌</a>
                                            </p>
                                            <a href="#" class="addto-trolley">
                                                加入购物车
                                            </a>
                                        </li>
                                    </ul>
                                </span>
</div>
<i class="iconfont">&#xe631;</i>
<i class="iconfont">&#xe630;</i>
<p>
<i class="adactive"></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
</p>
</div>
</div>
</span>
</li>`
                });

                $('.trolley-detail').append(temp);
            }
        });
    }

    // 修改按钮
    $('.trolley-detail').on('click', '.modify-btn', function() {
        $(this).parent('.goods-standard>div').addClass('border-orange');
        $(this).addClass('appear');
        $(this).children('.modify-msg').addClass('appear');
        // console.log(this)
    });

    $('.trolley-detail').on('click', '.m-btn>span', function(ev) {
        ev.stopPropagation();
        $(this).parents('.goods-standard>div').removeClass('border-orange');
        $(this).parents('.modify-btn').removeClass('appear');
        $(this).parents('.modify-msg').removeClass('appear');
        console.log($(this).parents('.goods-standard>div'))

    });

    // 修改商品数量
    // 减少
    let goodsnum = $('.count-input').val();
    $('.trolley-detail').on('click', '.reduce-btn', function() {
        goodsnum = $(this).siblings('.count-input').val();
        if (goodsnum > 1) {
            goodsnum--;
        } else {
            goodsnum = 1;
            $(this).css('color', '#E5E5E5');
            $(this).hover(function() {
                $(this).css({
                    'color': '#E5E5E5',
                    'border-color': '#E5E5E5'
                });
            })

        }
        $(this).siblings('.count-input').val(goodsnum);
        // 获得商品单价
        let gdprice = $(this).parents('.goods-counts').siblings('.unit-price').children('p').eq(1).text().trim().slice(1);
        // 修改商品总价
        $(this).parents('.goods-counts').siblings('.sin-sumprice').children('p').eq(0).text('￥' + (goodsnum * gdprice));

        // 修改对应 cookie 的数量
        let res = trolley.map(function(elm) {
            if (elm.id == $(this).attr('data-id') && elm.edition == $(this).attr('data-edition')) {
                elm.num = goodsnum;
            }
            return elm;
        }.bind($(this)));
        cookie.set('trolley', JSON.stringify(res));
        // 所选商品总金额
        // 所选商品数量
        calprice();

    });

    // 增加
    $('.trolley-detail').on('click', '.add-btn', function() {
        goodsnum = $(this).siblings('.count-input').val();
        goodsnum++;
        $(this).siblings('.count-input').val(goodsnum);
        // 获得商品单价
        let gdprice = $(this).parents('.goods-counts').siblings('.unit-price').children('p').eq(1).text().trim().slice(1);
        // 修改商品总价
        $(this).parents('.goods-counts').siblings('.sin-sumprice').children('p').eq(0).text('￥' + (goodsnum * gdprice));

        // 修改对应 cookie 的数量
        let res = trolley.map(function(elm) {
            if (elm.id == $(this).attr('data-id') && elm.edition == $(this).attr('data-edition')) {
                elm.num = goodsnum;
            }
            return elm;
        }.bind($(this)));
        cookie.set('trolley', JSON.stringify(res));
        // 所选商品总金额
        // 所选商品数量
        calprice();
    });

    // 购物车页面直接修改商品数量
    $('.trolley-detail').on('change', '.count-input', function() {
        let num = $(this).val();
        if (parseInt(num) < 1 || !parseInt(num)) {
            num = 1;
        } else {
            num = parseInt(num);
        }
        $(this).val(num);

        // 获得商品单价
        let gdprice = parseFloat($(this).parents('.goods-counts').siblings('.unit-price').children('p').eq(1).text().trim().slice(1));
        // 修改商品总价
        $(this).parents('.goods-counts').siblings('.sin-sumprice').children('p').eq(0).text('￥' + (num * gdprice));

        // 修改对应 cookie 的数量
        let res = trolley.map(function(elm) {
            if (elm.id == $(this).attr('data-id') && elm.edition == $(this).attr('data-edition')) {
                console.log(elm);
                elm.num = num;
            }
            return elm;
        }.bind($(this)));
        cookie.set('trolley', JSON.stringify(res));
        // 所选商品总金额
        // 所选商品数量
        calprice();
    });


    // 删除单类商品
    // 删除对应cookie
    $('.trolley-detail').on('click', '.delete-this', function() {
        $(this).parents('li').remove();
        // 筛选删除以外的的购物车商品
        let res = trolley.filter(function(elm) {
            if (elm.id != $(this).attr('data-id') || elm.edition != $(this).attr('data-edition')) {
                return elm;
            }
        }.bind($(this)));
        cookie.set('trolley', JSON.stringify(res));
        // 所选商品总金额
        // 所选商品数量
        calprice();
    });

    // 相似商品轮播图
    let flag = false;
    $('.trolley-detail').on('click', '.like-text', function() {
        flag = !flag;
        if (flag) {
            $(this).siblings('div').children('#like-goods').css('display', 'block');
            $(this).children('i').css('display', 'inline-block');
            $(this).addClass('choose-sure');
        } else {
            $(this).siblings('div').children('#like-goods').css('display', 'none');
            $(this).removeClass('choose-sure');

        }
        $(this).siblings('div').children('#like-goods').slider();
    });

    // 金额计算
    $('#body').on('click', '.checkbox-btn', function() {
        // // 设置checked属性
        // console.log($(this).attr('checked'));

        if (!$(this).attr('checked')) {
            $(this).attr('checked', true);
        } else {
            $(this).attr('checked', false);
        }

        // 店铺全选按钮
        if ($(this).hasClass('store-check-all')) {
            let checkstate = $(this).attr('checked');
            $('.checkbox-btn').each(function() {
                this.checked = checkstate;
            });
        }

        // 购物车全选按钮
        if ($(this).hasClass('check-all-trolley')) {
            let checkstate = $(this).attr('checked');
            console.log($(this));
            $('.checkbox-btn').each(function() {
                this.checked = checkstate;
            });
        }

        // 所选商品总金额
        // 所选商品数量
        calprice();

    });

    // 所选商品总金额
    // 所选商品数量
    function calprice(checkBtn, valSrc, topAllPrice, bottomAllPrice, bottomAllCount) {
        let sumprice = 0;
        let sumnum = 0;
        $('.single-pro-choose').each(function() {
            if (this.checked) {
                sumprice += parseFloat($(this).parents('li').find('.sin-sum-price').text().trim().slice(1))
                sumnum++;
            }
        });
        $('.choosen-num').html(sumnum.toFixed(2));
        $('.price-sum').html(sumprice.toFixed(2));
        $('.total-price').html(sumprice.toFixed(2));
    }


});